<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head::head('','/css/bootstrap/select/bootstrap-select.min.css','/js/laydate/laydate.js,/js/jquery-validate/jquery.validate.min.js,/js/bootstrap/select/bootstrap-select.min.js,/js/bootstrap/select/defaults-zh_CN.min.js')">
</head>
<script th:inline="javascript">
    /*<![CDATA[*/

    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/ 'basepath';

    function initDeptList(){
        var companyId = $("select[name='companyId']:eq(0)").val();
        var url = basePath+"/lims/orgnazation/initDeptList"
        $.post({
            url:url,
            data:{"orgId":companyId},
            dataType:"json",
            success:function(data){
                var deptHtml = "<option value='-1'>请选择部门</option>";
                for(var i = 0;i < data.length; i++){
                    deptHtml += '<option value="'+data[i].orgId+'">'+data[i].orgName+'</option>'
                }
                $("select[name='orgId']:eq(0)").html(deptHtml);
            }
        });

    }

    function judgeUsernameAvailable(){
        var username = $("input[name='username']:eq(0)").val();
        if(username == ""){
            return false;
        }
        var url = basePath+"/lims/user/judgeUsernameAvailable"
        $.post({
            url:url,
            data:{"username":username},
            dataType:"json",
            success:function(data){
                if(data){
                    $("button[name='addUserBtn']:eq(0)").show();
                    $("#usernameMessageDiv").hide();
                }else{
                    $("#usernameMessage").html("该用户名已被注册")
                    $("#usernameMessageDiv").show();
                    $("button[name='addUserBtn']:eq(0)").hide();
                }
            }
        });

    }

    function addUser(){
        var valiReuslt = $("#userAddForm").valid();
        if(!valiReuslt){
            return false;
        }

        var formData = $("#userAddForm").serialize();
        var url = basePath + "/lims/user/addUser";
        $.post({
            url:url,
            data:formData,
            dataType:"json",
            success:function(data){
                if(data){
                    parent.spop({
                        template: '添加成功',
                        position  : 'top-center',
                        style: 'success',
                        autoclose: 2000
                    });
                    closeModal();
                    parent.openMainFrame("/lims/user/userList");
                }else{
                    parent.spop({
                        template: '添加失败',
                        position  : 'top-center',
                        style: 'error',
                        autoclose: 3000
                    });
                }
            }
        });


    }

    function closeModal(){
        parent.closeModal();

    }

    jQuery.validator.addMethod("isNotEmpty",
        function(value,element,params){
            return value != -1;
        },'请选择'
    );

    $(function(){
        $("#userAddForm").validate({
            rules:{
                username:"required",
                realName:"required",
                telephone:{
                    digits:true,
                    maxlength:11,
                    minlength:11
                },
                companyId:{
                    required:true,
                    isNotEmpty:true
                },
                orgId:{
                    required:true,
                    isNotEmpty:true
                }


            },
            messages:{
                username:"请输入用户名",
                realName:"请输入用户姓名",
                telephone:{
                    digits:'请输入正确的手机号码',
                    maxlength:'手机号码应为11位',
                    minlength:'手机号码应为11位'
                },
                companyId:{
                    required:"请选择所属公司",
                    isNotEmpty:"请选择所属公司"
                },
                orgId:{
                    required:"请选择所属部门",
                    isNotEmpty:"请选择所属部门"
                },
            }
        });

    });



    /*]]>*/
</script>
<!--layDate组件初始化-->
<script>
    lay('#version').html('-v'+ laydate.v);

    //执行一个laydate实例
    laydate.render({
        elem: '#birthday' //指定元素
    });
</script>



<body>
    <div class="container">

        <form th:id="userAddForm" class="form-control" style="width: 107%;margin-left: -15px;">
            <div th:id="usernameMessageDiv" class="alert alert-danger alert-dismissable" style="width: 400px;
            margin-bottom: 15px;display: none">
                <button type="button" class="close" data-dismiss="alert"></button>
                <strong th:id="usernameMessage"></strong>
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text glyphicon glyphicon-star" style="color: #ff0000;"> 用户名</span>
              </div>
              <input type="text" th:id="username" th:name="username" class="form-control" autocomplete="off" th:onblur="'javascript:judgeUsernameAvailable()'">

            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text glyphicon glyphicon-star" style="color: #ff0000;">用户姓名</span>
                </div>
                <input type="text" th:id="realName" th:name="realName" autocomplete="off" class="form-control">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">&nbsp;&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话&nbsp;&nbsp;</span>
                </div>
                <input type="text" th:id="telephone" th:name="telephone"  autocomplete="off" class="form-control">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;</span>
                </div>
                <div class="RadioStyle">
                    <div class="Block PaddingL">
                        <input type="radio" name="sex"  id="male" th:value="1" th:checked="'checked'"/>
                        <label for="male">男</label>
                        <input type="radio" name="sex" id="female" th:value="0"/>
                        <label for="female">女</label>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">&nbsp;&nbsp;出生日期&nbsp;&nbsp;</span>
                </div>
                <input type="text" th:id="birthday" th:name="birthday" autocomplete="off" class="form-control">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text glyphicon glyphicon-star" style="color: #ff0000;">所属公司</span>
                </div>
                <select class="form-control" th:id="companyId" th:name="companyId" th:onchange="'javascript:initDeptList()'">
                    <option th:value="-1">请选择公司</option>
                    <option th:each="company:${companyList}" th:value="${company.orgId}" th:text="${company.orgName}"></option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text glyphicon glyphicon-star" style="color: #ff0000;">所属部门</span>
                </div>
                <select th:id="orgId" class="form-control" th:name="orgId">
                    <option th:value="-1">请选择部门</option>

                </select>
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text glyphicon glyphicon-star" style="color: #ff0000;">分配角色</span>
                </div>
                <select th:id="roleIds" th:name="roleIds" class="selectpicker" multiple="multiple" title="请选择角色,可多选" data-size="4" data-style="btn-danger" >
                    <option th:each="role:${roleList}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">是否启用</span>
                </div>
                <div class="RadioStyle">
                    <div class="Block PaddingL">
                        <input type="radio" name="status" id="status2" th:value="1" th:checked="checked"/>
                        <label for="status2">启用</label>
                        <input type="radio" name="status"  id="status1" value="0"/>
                        <label for="status1">不启用</label>
                    </div>
                </div>
            </div>
            <div th:align="right">
                <button type="button" th:onclick="'javascript:addUser()'" th:name="addUserBtn"  class="btn btn-primary" style="display: none">添加</button>
                <button type="reset" class="btn btn-warning">重置</button>
                <button type="button" th:onclick="'javascript:closeModal()'" class="btn btn-secondary">关闭</button>
            </div>

        </form>
    </div>

</body>



</html>